<template>
  <div class="post-list">
    <hm-bread></hm-bread>
    <!-- 表格组件 -->
    <!--
      el-table: 表格
      :data='tableData : 传入表格需要展示的数据

      el-table-column: 表格的列
      label: 这一列的表头信息
      prop: 用于指定需要展示的对应的属性名
     -->
    <el-table :data="postList">
      <el-table-column :index='indexMethod'  type='index' label='序号'></el-table-column>
        <el-table-column label='标题' prop='title'></el-table-column>
        <el-table-column label='作者' prop='user.nickname'></el-table-column>
        <el-table-column label='时间' prop='create_date'>
          <template v-slot:default='obj'>
              {{ obj.row.create_date | time }}
          </template>
        </el-table-column>
        <el-table-column label='封面'>
          <template v-slot:default='obj'>
              <img class="cover" :src="obj.row.cover[0].url | fixUrl" alt="">
          </template>
        </el-table-column>
        <el-table-column label='操作'>
          <template v-slot='obj'>
              <el-button @click='edit(obj.row.id)'>编辑</el-button>
              <el-button type='danger'>删除</el-button>
          </template>
        </el-table-column>
  </el-table>
    <!-- 分页 -->
    <!--
      @size-change  每页条数的变化
      @current-change  当前页变化时触发
      :current-page  当前页
      :page-size  供用户选择的,每页条数
      layout  指的是空间列表
      :totle  总条数
     -->
       <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[2, 4, 6, 8, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      postList: [],
      pageIndex: 1, // 每页
      pageSize: 4, // 每页的条数
      total: 0 // 默认给个0
    }
  },
  created () {
    this.getPostList()
  },
  methods: {
    async getPostList () {
      const res = await this.$axios.get('/post', {
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize
        }
      })
      console.log(res)
      const { statusCode, data, total } = res.data
      if (statusCode === 200) {
        this.postList = data
        this.total = total
        console.log(this.postList)
      }
    },
    // 修改每页的条数
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pageSize = val
      // 将当前页面跟新成第一页
      this.pageIndex = 1
      // 重新渲染
      this.getPostList()
    },
    // 当前页变化时,触发
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      // val 用户选择的当前页
      this.pageIndex = val
      // 重新渲染
      this.getPostList()
    },
    // 控制序号
    indexMethod (index) {
      // 序号应该添加上前面的总条数
      // 在原来的第一页序号基础上,加上
      return (this.pageIndex - 1) * this.pageSize + index + 1
    },
    // 编辑事件
    // 点击编辑按钮,跳转到文章列表页面进行修改,
    edit (id) {
      this.$router.push({
        name: 'post-publish',
        params: {
          id
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>

.el-table  {
  margin-top: 25px;
}
.cover {
  width: 150px;
  height: 70px;
  object-fit: cover;
}
</style>
